<form nz-form [formGroup]="elementFormGroup">
  <div nz-row nzGutter="8">
    <div nz-col nzSpan="12">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired>名称</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <input nz-input placeholder="请输入控件标签名称" formControlName="name" (blur)="generateId()"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col nzSpan="12">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired>控件ID</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <input nz-input placeholder="控件ID唯一" formControlName="id"/>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <div nz-row nzGutter="8">
    <div nz-col nzSpan="12">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired>类型</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <nz-select nzPlaceHolder="请选择控件类型" formControlName="type">
            <nz-option *ngFor="let option of itemTypes"
                       [nzValue]="option.value"
                       [nzLabel]="option.label"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col nzSpan="12" *ngIf="showPlaceholder()">
      <nz-form-item>
        <nz-form-label [nzSpan]="6">提示内容</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <input nz-input formControlName="placeholder" placeHolder="填写输入框提示内容"/>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <div nz-row nzGutter="8" *ngIf="showOptionSource()">
    <div nz-col nzSpan="12">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired>数据来源</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <nz-radio-group formControlName="optionSource">
            <label nz-radio nzValue="manual">手动输入</label>
            <label nz-radio nzValue="dictionary">字典</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col nzSpan="12" *ngIf="elementFormGroup.value.optionSource==='manual'">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired>可选项</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <input nz-input placeHolder="请输入可选项,以|分割" formControlName="options"/>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <div nz-row nzGutter="8">
    <div nz-col nzSpan="12">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired>必填项</nz-form-label>
        <nz-form-control [nzSpan]="6">
          <nz-switch formControlName="required" nzCheckedChildren="是" nzUnCheckedChildren="否"></nz-switch>
        </nz-form-control>
        <ng-container *ngIf="showMultiple()">
          <nz-form-label [nzSpan]="6" nzRequired>多选</nz-form-label>
          <nz-form-control [nzSpan]="6">
            <nz-switch formControlName="isMultiple" nzCheckedChildren="是" nzUnCheckedChildren="否"></nz-switch>
          </nz-form-control>
        </ng-container>
      </nz-form-item>
    </div>
    <div nz-col nzSpan="12">
      <nz-form-item>
        <nz-form-label [nzSpan]="6">校验</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <nz-select nzPlaceHolder="请选择校验规则" formControlName="validators">
            <nz-option *ngFor="let ele of itemValidators"
                       [nzLabel]="ele.label"
                       [nzValue]="ele.value"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <div nz-row nzGutter="8">
    <div nz-col nzSpan="12">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired>控件样式</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <nz-radio-group [(ngModel)]="elementWidthStyle" [ngModelOptions]="{standalone: true}"
                          (ngModelChange)="changeElementWidth($event)">
            <label nz-radio nzValue="line">整行</label>
            <label nz-radio nzValue="half">半行</label>
            <label nz-radio nzValue="customize">自定义</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col nzSpan="12" *ngIf="elementWidthStyle==='customize'">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired>标签占位</nz-form-label>
        <nz-form-control [nzSpan]="6">
          <nz-input-number formControlName="labelWidth"
                           [nzMin]="1" [nzMax]="23" [nzStep]="1"></nz-input-number>
        </nz-form-control>
        <nz-form-label [nzSpan]="6" nzRequired>控件占位</nz-form-label>
        <nz-form-control [nzSpan]="6">
          <nz-input-number formControlName="controlWidth"
                           [nzMin]="1" [nzMax]="23" [nzStep]="1"></nz-input-number>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>

  <div nz-row nzGutter="8">
    <div nz-col nzSpan="12">
      <nz-form-item>
        <nz-form-label [nzSpan]="6">空值隐藏</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <nz-switch formControlName="emptyHidden" nzCheckedChildren="是" nzUnCheckedChildren="否"></nz-switch>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
</form>
<div class="footer" style="display: flex;justify-content: flex-end">
  <button type="button" class="ant-btn" style="margin-right: 8px;" (click)="close()">
    <span>取消</span>
  </button>
  <button type="button" class="ant-btn ant-btn-primary" (click)="submit()">
    <span>确定</span>
  </button>
</div>
